import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import PawPrintIcon from '../components/icons/PawPrintIcon';
import { useAuth } from '../context/AuthContext';

const LoginView: React.FC = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const { login, adminUsername } = useAuth();
  const adminPassword = import.meta.env.VITE_ADMIN_PASSWORD ?? 'admin123';
  const navigate = useNavigate();

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setError('');

    if (!username || !password) {
      setError('请输入用户名和密码');
      return;
    }

    const success = login(username, password);
    if (success) {
      navigate('/admin', { replace: true });
    } else {
      setError('用户名或密码错误');
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-brand-cream p-4">
      <div className="bg-white rounded-2xl shadow-2xl p-8 max-w-md w-full">
        {/* Logo */}
        <div className="flex items-center justify-center gap-2 text-3xl font-serif font-bold tracking-tight text-brand-wood mb-8">
          <PawPrintIcon className="text-brand-orange" width={40} height={40} />
          <span>ABELLA</span>
        </div>

        {/* Login Form */}
        <div className="space-y-6">
          <div>
            <h2 className="text-2xl font-serif font-bold text-center text-brand-wood">管理员登录</h2>
            <p className="text-center text-gray-500 mt-2">请输入您的管理员账号和密码</p>
          </div>

          {error && (
            <div className="bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-md text-sm">
              {error}
            </div>
          )}

          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-brand-wood mb-2">用户名</label>
              <input
                type="text"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                className="w-full border border-gray-300 rounded-md p-3 focus:ring-2 focus:ring-brand-orange focus:border-brand-orange focus:outline-none"
                placeholder="请输入用户名"
                autoComplete="username"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-brand-wood mb-2">密码</label>
              <input
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="w-full border border-gray-300 rounded-md p-3 focus:ring-2 focus:ring-brand-orange focus:border-brand-orange focus:outline-none"
                placeholder="请输入密码"
                autoComplete="current-password"
              />
            </div>

            <button
              type="submit"
              className="w-full bg-brand-orange text-white py-3 rounded-md hover:bg-orange-600 transition-colors font-bold shadow-md"
            >
              登录
            </button>
          </form>

          <div className="text-center text-sm text-gray-500 space-y-1">
            <p>默认账号: {adminUsername}</p>
            <p>默认密码: {adminPassword}（可在 .env.local 中通过 VITE_ADMIN_PASSWORD 修改）</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default LoginView;
